Browser extension allowing web users to draw on live web pages

ABSTRACT

A web browser extension for annotating live web pages. Upon being installed on a web browser and launched, the browser extension inserts a content script into the underlying web page, that creates a floating and draggable control panel of drawing tools and a transparent canvas to overlay a live web page on which user can draw or text. Also provided are tools for taking screenshot of the visible part of the overlaid web page and create image for downloading or printing.

DESCRIPTION OF RELATED ART

The present application relates to a web browser extension, and moreparticularly to a web browser extension that allows a web user to drawor make marks on a live web page and make comments.

Note that the points discussed below may reflect the hindsight gainedfrom the disclosed inventions, and are not necessarily admitted to beprior art.

Currently web browsers only display web contents provided from a websource, it is cumbersome to annotate a web page and share thisannotation with colleagues and friends. Yet no browser function isavailable that enables web users to draw or make marks directly on theweb screen that they are visiting.

Web users can be found frustrated when they want to quickly add somegraphics or annotations to share with other people.

There is a need for such web browser extension utility to easily add-onto the currently available web browsers to render a web pageannotatable.

SUMMARY

The present application discloses a web browser extension that can beeasily added on to a web browser to allow users the ability to makeinstant notes and annotations on live web pages.

In one aspect of an embodiment, an extension is provided that inserts acontent script to client web browser wherein the content scriptinitializes a group of functions for drawings.

In another aspect of an embodiment, a group of functions that areinitialized include a group of event handlers for creating a controlpanel and for creating a transparent canvas.

In another aspects of an embodiment, a transparent canvas is provided bycalling for HTML5 transparent canvas element to overlay a live webpagewherein the canvas listens to mouse and touch events commands to renderdrawing and texting.

In another aspects of an embodiment, a control panel is provided byenabling a group of drawing tools that execute user commands for mouseand touch events, such as shape drawings, color selections, lineselections and erasing, etc.

In another aspects of an embodiment, the content script communicateswith the extension which use browsers provided API to take screenshot ofvisible part of annotated web page and create downloadable and printableimage. Users can get these benefits by installing the extension to theirbrowsers.

The disclosed innovation, in various embodiments, provide one or more ofat least the following advantages: that users are enabled to instantlycomment or annotate any web pages that they are visiting, and they areenabled to make a record and share the annotation by taking a screenshotof the annotated webpage. However, not all of these advantages resultfrom every one of the innovations disclosed, and this list of advantagesdoes not limit the various claimed inventions.

BRIEF DESCRIPTION OF THE DRAWINGS

The disclosed application will be described with reference to theaccompanying drawings, which show important sample embodiments of theinvention and which are incorporated in the specification hereof byreference, wherein:

FIG. 1 shows an example web annotation using a web browser extension toCHROME browser in accordance with this application.

FIG. 2 shows an example web annotation using a web browser extension toFIREFOX browser in accordance with this application.

FIG. 3 shows an example web browser extension initialization process inaccordance with this application.

FIG. 4 shows an example web browser extension for creating a transparentcanvas in accordance with this application.

FIG. 5 shows an example web browser extension for creating a draggablecontrol panel in accordance with this application.

DETAILED DESCRIPTION OF SAMPLE EMBODIMENTS

The numerous innovative teachings of the present application will bedescribed with particular reference to presently preferred embodiments(by way of example, and not of limitation). The present applicationdescribes several embodiments, and none of the statements below shouldbe taken as limiting the claims generally.

For simplicity and clarity of illustration, the drawing figuresillustrate the general manner of construction, and description anddetails of well-known features and techniques may be omitted to avoidunnecessarily obscuring the invention. Additionally, elements in thedrawing figures are not necessarily drawn to scale, some areas orelements may be expanded to help improve understanding of embodiments ofthe invention.

The present invention may be described herein in terms of functionalblock components and various processing steps. It should be appreciatedthat such functional blocks may be realized by any number of hardwareand/or software components configured to perform the specifiedfunctions. For example, the present invention may employ variousintegrated circuit components, e.g., memory elements, processingelements, logic elements, look-up tables, and the like, which may carryout a variety of functions under the control of one or moremicroprocessors or other control devices.

It should be appreciated that the particular implementations shown anddescribed herein are illustrative of the invention and its best mode andare not intended to otherwise limit the scope of the present inventionin any way. Furthermore, the connecting lines shown in the variousfigures contained herein are intended to represent exemplary functionalrelationships and/or physical couplings between the various elements. Itshould be noted that many alternative or additional functionalrelationships or physical connections may be present in a practicalincentive system implemented in accordance with the invention.

As will be appreciated by one of ordinary skill in the art, the presentinvention may be embodied as a method, a computation processing system,a device for computation processing, and/or a computer program product.Accordingly, aspects of the present invention may take the form of anentirely software embodiment an entirely hardware embodiment, orcombining aspects of both software and hardware embodiment. Furthermore,the present invention may take the form of a computer program product ona computer-readable storage medium having computer-readable program-codemeans embodied in the storage medium. Any suitable computer-readablestorage medium may be utilized, including hard disks, CD-ROM, opticalstorage devices, magnetic storage devices, and/or the like.

The terms “first,” “second,” “third,” “fourth,” and the like in thedescription and the claims, if any, may be used for distinguishingbetween similar elements and not necessarily for describing a particularsequential or chronological order. It is to be understood that the termsso used are interchangeable. Furthermore, the terms “comprise,”“include,” “have,” and any variations thereof, are intended to covernon-exclusive inclusions, such that a process, method, article,apparatus, or composition that comprises a list of elements is notnecessarily limited to those elements, but may include other elementsnot expressly listed or inherent to such process, method, article,apparatus, or composition.

API is the abbreviation of application program interface, is a set ofroutines, protocols, and tools for building software applications. APIspecifies how software components should interact.

A web browser herein is a software application for retrieving,presenting and traversing information resources (content) on the WorldWide Web. An information resource is identified by a Uniform ResourceIdentifier (URI/URL) and may be a web page of text, image, video orother piece of content. These content are generally presented within aweb browser screen.

Web browser functionality includes user interface, layout engine,rendering engine, JavaScript interpreter, UI backend, networkingcomponent and data persistence component. These components achievedifferent functionalities of a web browser and together provide allcapabilities of a web browser. Various web markup protocols have beendeveloped to display various web content.

In the case of http, https, file, and others, once the resource has beenretrieved the web browser will display it. HTML and associated content(image files, formatting information such as CSS, etc.) is passed to thebrowser's layout engine to be transformed from markup to an interactivedocument, a process known as “rendering”. Aside from HTML, web browserscan generally display any kind of content that can be part of a webpage. Most browsers can display images, audio, video, and XML files, andoften have plug-ins to support Flash applications and Java applets andJavascripts. Upon encountering a file of an unsupported type or a filethat is set up to be downloaded rather than displayed, the browserprompts the user to save the file to disk. The major web browsersinclude Firefox, Internet Explorer, Google Chrome, Opera, and Safari.

A browser extension is a computer program that extends the functionalityof a web browser.

It is contemplated and intended that the design and method describedherein be applied to any web browsers that provides a group of APIs forextensions and add-ons; for clarity reason, the examples are given basedon GOOGLE CHROME web browsers, but an ordinary person in the art wouldknow the variations to modify the design to make it suitable to otherweb browsers.

FIG. 1 shows an example annotated live web page that a user is viewing.Numeral 100 refers to a control panel that includes a set of drawingtools, and on the transparent canvas 105 that overlays the GOOGLE searchweb page, a user can draw or text, for example a house and a sun 103,the end effect is an annotated GOOGLE search web page. A user can thentake a screen shot to record this annotation.

FIG. 2 shows an example annotation over a video clip of youtube.com webpage that a user is viewing using FIREFOX web browser. Numeral 203refers to a control panel that includes a set of drawing tools, and onthe transparent canvas 205 that overlays youtube.com video window, auser can draw or text, for example a circle. The end effect is anannotated image from a youtube.com. A user can then take a screen shotto record this annotation.

FIG. 3 shows an exemplary functional process of a web browser extensionof this invention. Web browser will perform the steps from 301 to 305while the browser extension script will perform the steps from 307 to317. A user downloads and adds the browser extension to a web browser atstep 301, he then triggers the browser extension icon at step 303 tostart a content script in the browser extension which renders at step305 the web browser to insert the content script from the browserextension into the web browser.

The content script is a script that runs on the underlying web page.Upon insertion is done, the content script will run automatically. Firstthing to do is checking if it has been already inserted before at step307. If no, at step 309, the content script will initialize, includinginitializing variables and setting up a flag at step 311 to indicatethat the content script has been inserted and executed.

If yes, which means the content script has already been executed by thecurrent web page. It will go ahead at step 313 and create a controlpanel at step 317 and a transparent canvas overlay in the underlying webpage at step 315. Users can operate on the control panel and draw ortext on the transparent canvas overlay with mouse or touch screen.

FIG. 4 shows an exemplary functional process of a transparent canvasoverlay. The transparent canvas overlay may be implemented through usingan HTML5 canvas element at step 401 with transparent background, whichautomatically resize itself at step 405 to fit the browser screen uponuser resize the browser in order to cover the whole web page.

With user input at step 403, the transparent canvas overlay will listenfor the mouse and touch events at step 407. With the command sent fromthe control panel, it enables users to draw and text on it at step 409.Depending on the drawing commands selected from the control panel, userscan draw shapes (polygon, circle, ellipse, rectangle), lines, add textwith the selected color, transparency and line width, and erase parts ofthe drawings.

The transparent canvas overlay can set CSS3 property pointer-events to“none” to ignore all the mouse/touch events and relay those events tothe underlying web page, so that users can interact with the web pagewithout removing the canvas overlay.

In reference to FIG. 5, it shows an exemplary functional process of acontrol panel. The control panel provides a group of functions at step505, which listen for the mouse and touch events at step 509. Throughuser input actions 507, a user can select a drawing tool, color,transparency, line width, and eraser, or issue a command to take ascreenshot of the visible part of the web page with the drawings,interact with the web page or exit the drawing function. The panel canbe dragged to prevent it from constantly covering some content ofunderlying web page.

A user can switch and select drawing tools at step 511, and execute adrawing function at step 513 and draw on the transparent canvas at step521. The user can also send a command at 513 though control panel to thecontent script, which calls the browser extension API at step 519 totake a screenshot of the visible area of the web page. The contentscript relay this command to the extension, which take a screenshot withthe browser provided API and open a new tab with the image data wherethe screenshot will be presented. On the new tab, users are able todownload the image or print it.

Users can send a command though control panel to the content script toexit the drawing function, which will remove the control panel and thetransparent canvas overlay and clear all the data and events handlersthat are bonded with drawings so that it won't affect the browser speedwhile drawing function is not needed. Users can trigger the browserextension icon again to initiate the process illustrated in FIG. 3.

As will be recognized by those skilled in the art, the innovativeconcepts described in the present application can be modified and variedover a tremendous range of applications, and accordingly the scope ofpatented subject matter is not limited by any of the specific exemplaryteachings given. It is intended to embrace all such alternatives,modifications and variations that fall within the spirit and broad scopeof the appended claims.

None of the description in the present application should be read asimplying that any particular element, step, or function is an essentialelement which must be included in the claim scope: THE SCOPE OF PATENTEDSUBJECT MATTER IS DEFINED ONLY BY THE ALLOWED CLAIMS. Moreover, none ofthese claims are intended to invoke paragraph six of 35 USC section 112unless the exact words “means for” are followed by a participle.

The claims as filed are intended to be as comprehensive as possible, andNO subject matter is intentionally relinquished, dedicated, orabandoned.

What is claimed is:
 1. A method for annotating a live web page,comprising the steps of: installing a web browser extension having acontent script on a web browser; navigating to a live web page on acomputer with said web browser; said browser extension inserting thecontent script into said web browser; said content script initializingsaid web browser extension and providing a floating and draggablecontrol panel of drawing tools and a transparent canvas overlaying saidlive web page; activating a drawing tool and drawing a shape or a textwith mouse or keyboard on said transparent canvas, whereby the live webpage can be viewed as a marked live web page by the drawing tool; andsaid web browser extension listening to a message sent from said contentscript for taking a screenshot and creating viewable image of the markedlive web page.
 2. The method for annotating a live web page of claim 1,wherein said transparent canvas automatically resize itself to alwayscover the entire live web page when the live web page changes its size.3. The method for annotating a live web page of claim 1, wherein saidtransparent canvas is configured to set CSS3 property pointer-events to“NONE” to ignore all the mouse/touch events and relay mouse/touch eventsto the live web page when a user needs to interact with the content ofthe web page.
 4. The method for annotating a live web page of claim 1,wherein said draggable control panel contains a set of drawing tools fordrawing shapes of polygon, circle, ellipse, rectangle, lines, text,selecting color, transparency, line width, and erasing a drawings.
 5. Aweb browser extension for annotating a live web page, comprising: anextension icon for user interaction; a content script; an extensionbackground script that listens for messages from the content script andsaid extension icon, wherein said content script is inserted by saidbackground script into the live web page; a floating and draggablecontrol panel of drawing tools that is created by said content script; atransparent canvas that is created by said content script overlayingsaid live web page to form an overlaid web page; wherein said backgroundscript is configured to utilize web browser API to take a screenshot ofthe overlaid web page, and to create a viewable, downloadable andprintable image from raw image data generated by web browser API.
 6. Theweb browser extension of claim 5, wherein said transparent canvasautomatically resize itself to always cover the entire web page when thelive web page changes its size.
 7. The web browser extension of claim 5,wherein said transparent canvas is configured to set CSS3 propertypointer-events to “none” to ignore all mouse/touch events and relay amouse/touch event to the web page when user needs to interact with theweb page.
 8. The web browser extension of claim 5, wherein saiddraggable control panel contains a set of drawing tools for drawingshapes of polygon, circle, ellipse, rectangle, lines, text, selectingcolor, transparency, line width, and erasing a drawings.